<template>
  <div class="jeecg-basic-table plc-data-view">
    <div class="tip">
      <span>PLC数据统计</span>
      <span class="tip-img"></span>
    </div>
    <div class="jeecg-search-layer">
      <a-form ref="form" :model="queryParam">
        <a-row :gutter="[16, 16]">
          <a-col :span="8">
            <a-form-item label="站点编码" name="stationCode">
              <a-select v-model:value="queryParam.stationCode" placeholder="请选择站点编码">
                <a-select-option value="">请选择</a-select-option>
                <template v-for="(vo, index) in stationList" :key="index">
                  <a-select-option :value="vo.stationCode">
                    {{ vo.name }}
                  </a-select-option>
                </template>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="queryParam.stationCode !== ''">
            <a-col :span="8">
              <a-form-item label="设备字段" name="field">
                <a-select v-model:value="queryParam.field" placeholder="请选择字段">
                  <a-select-option value="">请选择</a-select-option>
                  <template v-for="vo in fieldLists" :key="vo">
                    <a-select-option :value="vo">{{ vo }}</a-select-option>
                  </template>
                </a-select>
              </a-form-item>
            </a-col>
          </template>
          <a-col :span="8">
            <a-form-item label="时间">
              <a-range-picker v-model:value="dateTime" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" show-time style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" style="text-align: right">
            <a-form-item>
              <a-button type="primary" @click="onSearch">查询</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="jeecg-table-view">
      <a-spin :spinning="loading" tip="加载中...">
        <div id="plc-data" ref="chartRef"></div>
      </a-spin>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, Ref, watch, getCurrentInstance, onMounted, nextTick } from 'vue';
import { useUserStore } from '/@/store/modules/user';
import { plcChartApi, plcHeadersApi } from '/@/api/plc/index';
import { useECharts } from '/@/hooks/web/useECharts';
import moment from 'moment';
import { parse } from 'path';
import { stationListApi } from '/@/api/station/index';

const userStore = useUserStore();

let { proxy } = getCurrentInstance();

const chartRef = ref<HTMLDivElement | null>(null);

let loading = ref(false);

let fieldLists = ref([]);

let start = moment().subtract(15, 'minutes').format('YYYY-MM-DD HH:mm:ss');
let end = moment().format('YYYY-MM-DD HH:mm:ss');

let dateTime = ref([start, end]);

// 站点列表
let stationList = ref([]);

let queryParam = ref({
  // 开始时间
  startTime: '',
  // 结束时间
  endTime: '',
  // 站点编码
  stationCode: '',
  // 字段名称
  field: '',
});

watch(
  () => queryParam.value.stationCode,
  (stationCode) => {
    if (stationCode !== '') {
      initEquipmentField(stationCode);
    }
  },
  { immediate: true }
);

watch(
  () => dateTime.value,
  ([a, b]) => {
    Object.assign(queryParam.value, {
      startTime: a,
      endTime: b,
    });
  },
  { immediate: true }
);

function onInit() {
  let data = {};
  let keys = Object.keys(queryParam.value);
  Object.values(queryParam.value).map((_, i) => {
    if (_ !== '') {
      data[keys[i]] = _;
    }
  });
  loading.value = true;
  const { setOptions, getInstance, resize } = useECharts(chartRef as Ref<HTMLDivElement>);
  const option = reactive({
    title: {
      text: '',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: '8%',
      left: '5%',
      right: '5%',
      bottom: '15%',
      containLabel: false,
    },
    dataZoom: [
      {
        type: 'inside',
        realtime: true,
        start: 0,
      },
      {
        realtime: true,
        start: 0,
      },
    ],
    xAxis: {
      type: 'category',
      data: [],
      boundaryGap: false,
      axisLabel: {
        textStyle: {
          color: '#333',
          margin: 15,
        },
        interval: 0,
        rotate: 0,
      },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        type: 'line',
        data: [],
      },
    ],
  });
  plcChartApi(data)
    .then((res) => {
      loading.value = false;
      if (res) {
        if (res.data) {
          let { title } = res;
          let dataList = res.data;
          option.xAxis.axisLabel.interval = parseInt(dataList.length / 10, 10);
          for (let i = 0; i < dataList.length; i++) {
            let { data, time } = dataList[i];
            option.title.text = title;
            option.xAxis.data.push(time);
            option.series[0].data.push(data);
          }
          setOptions(option);
          resize();
        }
      }
    })
    .catch((error) => {
      loading.value = false;
    });
}

/**
 * 初始化字段列表
 */
function initEquipmentField(stationCode) {
  queryParam.value.field = '';
  plcHeadersApi({ stationCode }).then((res) => {
    fieldLists.value = res;
  });
}

function initStation() {
  stationListApi({}).then((res: any) => {
    stationList.value = res;
  });
}

/**
 * 查询数据统计
 */
function onSearch() {
  onInit();
}

onMounted(() => {
  onInit();
  initStation();
});
</script>


<style lang="less" scoped>
.plc-data-view {
  margin: 12px;
  background: #fff;
  .tip {
    width: 100%;
    height: 44px;
    padding: 0 0 0 43.3px;
    background: url('@/assets/images/img-17.png') no-repeat;
    background-size: 100% 100%;
    line-height: 44px;
    span {
      font-size: 16px;
      color: #fff;
    }
  }
  .jeecg-search-layer {
    padding: 12px 15px;
    background: #fff;
    border-radius: 8px;
    .ant-form {
      max-width: auto;
      .ant-form-item {
        margin-bottom: 12px;
      }
      :deep(.ant-col) {
        width: auto;
      }
    }
  }
  .jeecg-table-view {
    padding-bottom: 12px;
    #plc-data {
      width: calc(100% - 24px);
      height: calc(100vh - 316px);
      margin: 0 auto;
    }
  }
}
</style>